<template>
  <div class="goods">
    <header>
      <hry-search
        class="search"
        text="帮你找到满意的商品"
        @changeSearch="changeSearch"
      ></hry-search>
      <ul class="list">
        <li @click="changeSort" :class="sort_type === 1 ? 'active' : ''">
          销量
        </li>
        <li>
          <span
            @click="changeType"
            class="iconfont"
            :class="listType === 1 ? 'iconcascades' : 'iconlist'"
          ></span
          ><span @click="isPopupShow = true"
            >筛选<md-icon name="filter" class="filter"></md-icon
          ></span>
        </li>
      </ul>
    </header>
    <div class="goods-content">
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        :auto-reflow="true"
        @endReached="onEndReached"
        @refreshing="onRefresh"
      >
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <hry-card
          v-for="(item, index) in data"
          :key="index"
          :keys="index + 1"
          :info="item"
        ></hry-card>
        <md-scroll-view-more
          slot="more"
          :is-finished="isFinished"
          finished-text="已经到底啦~"
        >
        </md-scroll-view-more>
      </md-scroll-view>
    </div>
    <md-popup v-model="isPopupShow" position="right">
      <div class="md-example-popup md-example-popup-right">
        <h1 class="common-style">筛选</h1>
        <hry-filter-item title="品牌" :list="brand"></hry-filter-item>
        <hry-filter-item title="酒类" :list="brand"></hry-filter-item>
        <hry-filter-item title="度数"></hry-filter-item>
        <hry-filter-item title="酒香形"></hry-filter-item>
        <hry-filter-item title="产地"></hry-filter-item>
      </div>
    </md-popup>
  </div>
</template>

<script>
import {
  Icon,
  Popup,
  PopupTitleBar,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "index",
  components: {
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    hrySearch: () => import("@/components/search/index"),
    hryCard: () => import("@/components/goods/card"),
    hryFilterItem: () => import("@/components/goods/filterItem")
  },
  data() {
    return {
      isPopupShow: false,
      data: [],
      brand: ["茅台", "五粮液", "郎酒", "泸州老窖", "剑南春", "江小白"],
      curpage: 1,
      sort_type: null,
      search_key: null,
      isFinished: false
    };
  },
  methods: {
    changeSort() {
      if (this.sort_type) {
        this.sort_type = null;
      } else {
        this.sort_type = 1;
      }
      this.getInfo(true);
    },
    changeSearch(value) {
      this.search_key = value;
      this.getInfo(true);
    },
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(
          this.$api.goodsList,
          {
            curpage: this.curpage,
            sort_type: this.sort_type,
            search_key: this.search_key
          },
          false
        )
        .then(res => {
          if (refresh) {
            this.data = res.data.list;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.list);
          }
          if (this.curpage === res.data.total_page) {
            this.isFinished = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeType() {
      if (this.listType === 1) {
        this.$store.dispatch("changeListType", 2);
      } else {
        this.$store.dispatch("changeListType", 1);
      }
    }
  },
  computed: {
    listType() {
      return this.$store.state.listType;
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  }
};
</script>

<style scoped lang="stylus">
  .goods{
    text-align: left;
    height 100%
    flex_content();
    flex_column();
  }
header{
  height 160px
  background white
  .search{
    border-bottom 1px solid #f0f0f0
  }
  .list{
    font-size 24px;
    padding 18px 24px;
    flex_content();
    flex_justify_space();
    text-align center
    color #666
    .iconfont{
      font-weight bold;
      display inline-block;
      padding-right 40px;
      margin-right 40px;
      font-size 24px;
      border-right 1px solid #F0F0F0
    }
    .active{
      color color-primary
    }
    .filter{
      font-size 24px;
    }
  }
}
  .goods-content{
    flex: auto;
    height: 100%;
    padding 0 24px;
    background #f0f0f0;
    overflow: hidden;
  }
  .md-example-popup{
    position relative
    font-size 28px
    font-weight 500
    box-sizing border-box
    background-color #F0F0F0
  }
  .md-example-popup-right{
    height 100%
    width 488px
    .common-style{
      padding-left 26px
    }
    h1{
      font-size:26px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      background color-primary
      color #ffffff
      padding-top 14px
      padding-bottom 14px
    }
  }
</style>
